<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram of Earth and Satellite</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #999;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="700" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // General Style
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '18px Arial';

        // Parameters
        const cx = 350;
        const cy = 250;
        const earthRadius = 110;
        const orbitRadius = 230;
        const satAngle = -38 * Math.PI / 180; // Satellite position in radians

        // Helper function to draw an arrow (line + arrowhead)
        function drawArrow(ctx, fromx, fromy, tox, toy, headlen) {
            const angle = Math.atan2(toy - fromy, tox - fromx);
            // Main line
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.stroke();
            // Arrowhead
            ctx.save();
            ctx.translate(tox, toy);
            ctx.rotate(angle);
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(-headlen, -headlen / 2.5);
            ctx.lineTo(-headlen, headlen / 2.5);
            ctx.closePath();
            ctx.fill();
            ctx.restore();
        }

        // 1. Draw Earth (the large circle)
        ctx.beginPath();
        ctx.arc(cx, cy, earthRadius, 0, 2 * Math.PI);
        ctx.stroke();

        // 2. Draw satellite TESS and its orbit line
        const sx = cx + orbitRadius * Math.cos(satAngle);
        const sy = cy + orbitRadius * Math.sin(satAngle);

        // The line from center to satellite
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(sx, sy);
        ctx.stroke();

        // The arrowhead on the orbit line, pointing outwards from the center
        const arrowOnOrbitX = cx + orbitRadius * 0.7 * Math.cos(satAngle);
        const arrowOnOrbitY = cy + orbitRadius * 0.7 * Math.sin(satAngle);
        ctx.save();
        ctx.translate(arrowOnOrbitX, arrowOnOrbitY);
        ctx.rotate(satAngle);
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(-12, -6);
        ctx.lineTo(-12, 6);
        ctx.closePath();
        ctx.fill();
        ctx.restore();

        // Draw the satellite TESS (diamond shape)
        ctx.save();
        ctx.translate(sx, sy);
        ctx.rotate(45 * Math.PI / 180);
        ctx.lineWidth = 1.5;
        ctx.strokeRect(-8, -8, 16, 16);
        ctx.restore();
        
        // 3. Draw radius of Earth indicators
        // Vertical radius line
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(cx, cy + earthRadius);
        ctx.stroke();

        // The two small arrows at the center
        // A vertical arrow pointing down along the radius line
        drawArrow(ctx, cx, cy, cx, cy + 45, 10);
        // A horizontal arrow pointing right from the center
        drawArrow(ctx, cx, cy, cx + 45, cy, 10);


        // 4. Labels and Leader Lines
        ctx.lineWidth = 1;
        
        // "Earth" label
        ctx.textAlign = 'right';
        ctx.fillText("Earth", cx - earthRadius/2 - 50, cy - earthRadius/2 - 20);
        ctx.beginPath();
        ctx.moveTo(cx - earthRadius/2 - 40, cy - earthRadius/2 - 25);
        ctx.lineTo(cx - earthRadius/2, cy - earthRadius/2);
        ctx.stroke();

        // "satellite TESS" label
        ctx.textAlign = 'left';
        ctx.fillText("satellite TESS", sx + 15, sy);
        ctx.beginPath();
        ctx.moveTo(sx + 12, sy + 2);
        ctx.lineTo(sx + 2, sy + 2); // Short line segment
        ctx.stroke();

        // "radius of orbit" label
        ctx.textAlign = 'right';
        ctx.fillText("radius of orbit", sx - 5, sy + 60);
        ctx.beginPath();
        ctx.moveTo(sx - 5, sy + 50);
        ctx.lineTo(cx + orbitRadius * 0.5 * Math.cos(satAngle), cy + orbitRadius * 0.5 * Math.sin(satAngle));
        ctx.stroke();

        // "radius of Earth" label
        ctx.textAlign = 'right';
        ctx.fillText("radius of Earth", cx - 40, cy + 95);
        ctx.fillText("6.4 × 10⁶ m", cx - 40, cy + 118);
        ctx.beginPath();
        ctx.moveTo(cx - 40, cy + 105);
        ctx.lineTo(cx, cy + 105);
        ctx.stroke();

        // Caption at the bottom
        ctx.textAlign = 'center';
        ctx.fillText("Fig. 1.1 (not to scale)", cx, cy + earthRadius + 50);

    </script>
</body>
</html>